<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>玩AR游戏 赢虎扑好礼</title>
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/base.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/static/summary/animate.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/swiper-3.3.1.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="/static/css/vr.css" />

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/js.js"></script>
    <script src="/static/js/mod.js"></script>
    <script src="/static/summary/swiper-3.4.1.min.js"></script>
    <script src="/static/summary/swiper.animate1.0.2.min.js"></script>

</head>
<body>
    <section class="rank-box"> 
     
    </section>  
    <script id="best-one-tph" type="text/html">
     
       <nav class="round-tab">
        <a id="best-one" class="rank_tab on">最强个人</a>
        <a id="best-city" class="rank_tab">最强城市</a>
        <a id="best-pet" class="rank_tab">最强宠物</a>
        <a id="best-scenic" class="rank_tab">景点搜索</a>
      </nav>
      <ul class="best-list best-one">
        <li>每击杀1只凶兽获得1个积分，排名前10可获得特殊勋章，每日重置</li>
        <li>
          <span class="rank"><%=result.userInfo.userRank%></span>
          <img src="<%if(result.userInfo.header){%><%=result.userInfo.header%><%}else{%>/static/images/4.jpg<%}%>">
          <p class="name"><%=result.userInfo.nickname%></p>
          <span class="num"><%=result.userInfo.win_count%></span>
        </li>
        <% for(var i = 0; i < result.userList.length; i++) { %>
        <li>
          <span class="rank"><%=i+1%></span>
          <img src="<%if(result.userList[i].userInfo.header){%><%==result.userList[i].userInfo.header%><%}else{%>/static/images/4.jpg<%}%>">
          <p class="name"><%=result.userList[i].userInfo.nickname%></p>
          <span class="num"><%=result.userList[i].points%></span>
        </li>
        <%}%>
      </ul>
      <!-- 最强个人 -->
      <ul class="best-list best-city" style="display: none;">
        <li>每周根据城市计算积分归属，排名前3的城市怪物掉落实物的几率大幅增加</li>
         <% for(var i = 0; i < result.cityList.length; i++) { %>
          <li>
            <span class="rank"><%=i+1%></span>
            <span class="cityname"><%=result.cityList[i].city%></span>
            <span class="name"><%=result.cityList[i].userInfo.nickname%></span>
            <span class="num"><%=result.cityList[i].points%></span>
          </li>
        <%}%>
      </ul>
      <!-- 最强城市 已好-->


      <ul class="best-list best-pet" style="display: none;">
        <li>将小宠物体力、攻击力、防御力折算为积分，排名前10可获得特殊勋章</li>
        <li>
          <span class="rank"><%=result.monsterInfo.monsterRank%></span>
          <!-- 排名 -->
          <span><%=result.monsterInfo.nickname%></span>
          <!-- 宠物名 -->
          <span class="name"><%=result.userInfo.nickname%></span>
          <!-- 所属用户  -->
          <span class="num"><%=result.monsterInfo.points%></span>
          <!-- 三维属性和 -->
        </li>
         <% for(var i = 0; i < result.monsterList.length; i++) { %>
          <li>
            <span class="rank"><%=i+1%></span>
            <span><%=result.monsterList[i].monsterInfo.nickname%></span>
            <span class="name"><%=result.monsterList[i].userInfo.nickname%></span>
            <span class="num"><%=result.monsterList[i].points%></span>
          </li>
        <%}%>
      </ul>
      <!-- 最高宠物属性 -->


      <ul class="best-list best-scenic" style="display: none;">
        <li>每每探索1个地点获得1个积分，排名前10可获得特殊勋章，每周重置</li>
       <li>
          <span class="rank"><%=result.userInfo.userRank%></span>
          <img src="<%if(result.userInfo.header){%><%=result.userInfo.header%><%}else{%>/static/images/4.jpg<%}%>">
          <span class="name"><%=result.userInfo.nickname%></span>
           <span><%=result.userInfo.city%></span>
          <span class="num"><%=result.userInfo.poi_count%></span>

        </li>
         <% for(var i = 0; i < result.exploreList.length; i++) { %>
          <li>
            <span class="rank"><%=i+1%></span>
            <img src="<%if(result.exploreList[i].userInfo.header){%><%==result.exploreList[i].userInfo.header%><%}else{%>/static/images/4.jpg<%}%>">
            <span class="name"><%=result.exploreList[i].userInfo.nickname%></span>
            <span><%=result.exploreList[i].userInfo.city%></span>
            <span class="num"><%=result.exploreList[i].points%></span>
          </li>
        <%}%>
      </ul>
      <!-- 探索最多 -->
    </script> 
</body>
 <script>
    $.get('{$appHost}/gameWeb/getRankList',{}, renderHome);
    function renderHome(data) {
        data = JSON.parse(data);
        var html = template('best-one-tph', data);
        $('.rank-box').html(html);
        var screenHeight = document.body.scrollHeight;
        $('.rank_tab').click(function(){
          var tab_class = $(this).attr('id');
          $('.rank_tab').each(function(){
            if($(this).attr('id') == tab_class) {
              $(this).addClass('on');
              $(this).show();
            } else {
              $(this).removeClass('on');
            }
          });
          $('.best-list').each(function(){
            if($(this).hasClass(tab_class)) {
              $(this).show();
              showRank(tab_class);
            } else {
              $(this).hide();
            }
          });
      });

      $('#all-member').click();
    }
   function showRank(tab) {
    var rankTypes = {
      'all-zlc': 1,
      'all-pace': 5,
      'all-moods': 10,
      'all-member': 20
    };

    if(!tab && rankType) {
      tab = rankType;
    }

    if(rankTypes[tab] == undefined) {
      return;
    } else {
      rankType = tab;
    }
  }
</script>
{template 'show/web-footer'}